<!--
 * @Author: your name
 * @Date: 2020-04-23 20:31:44
 * @LastEditTime: 2020-05-11 09:57:41
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \my-admin\src\pages\login.vue
 -->
    
<template>
    <div class="login_page">
        <section class="form_contianer" v-show="showLogin">
            <div class="manage_top">
                <p>某高校教务管理系统</p>
            </div>
            <el-form :model="loginForm" :rules="rules" ref="loginForm" class="loginForm">
                <el-form-item prop="userClass">
                    <el-radio v-model="loginForm.userClass" label="1">管理员</el-radio>
                    <el-radio v-model="loginForm.userClass" label="2">教师</el-radio>
                </el-form-item>
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="账号">
                        <span>dsfsf</span>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="密码" v-model="loginForm.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(loginForm)" class="submit_btn">登陆</el-button>
                </el-form-item>
            </el-form>
        </section>
    </div>
</template>

<script>
import {setToken} from '../config/auth'
import router from '../route'
export default {
    data() {
        return {
            loginForm: {
                userClass: "1",
                username: "",
                password: ""
            },
            rules: {
                username: [
                    { required: true, message: "请输入用户名", trigger: "blur" }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" }
                ]
            },
            showLogin: false
        };
    },
    mounted() {
        this.showLogin = true;
    },
    methods:{
        submitForm(loginForm){
            let that = this
            let data = {
                username: loginForm.username,
                password: loginForm.password,
                roleId: loginForm.userClass
            }
            this.$api.login(data).then(res => {
                console.log(res,loginForm.userClass)
                setToken("Token",res.token)
                this.$store.dispatch('GenerateRoutes',{"roles":loginForm.userClass}).then(() => {
                    let indexRoute = that.$store.getters.indexRoute
                    that.$router.push({ path: indexRoute })
                }); 
                
            })
        }
    }
};
</script>

<style lang="less" scoped>
@import "../style/commonality";
.login_page {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../assets/img/bg9.jpg) no-repeat center center;
    background-size: 100% 100%;
}
.form_contianer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 370px;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    .manage_tip {
        font-size: 22px;
    }
}
.loginForm{
	.submit_btn{
        width: 100%;
        padding:13px 0;
        font-size: 16px;
    }
    .loginTips{
        position: absolute;
        left: 10px;
        z-index: 20;
        // color: #FF7C1A;
        font-size: 18px;
        top: 50%;
        transform: translateY(-50%);
    }
}
</style>
